<template>
  <el-form
    ref="form"
    v-bind="$attrs"
  >
    <el-form-item
      v-for="item in VForm"
      :key="item.prop"
      :label="item.label"
    >
      <component
        :is="TYPES[item.type]"
        v-model="VFormModel[item.prop]"
        :placeholder="item.placeholder"
      >
        <el-option
          v-for="option in item.options"
          :key="option.value"
          :label="option.label"
          :value="option.value"
        />
      </component>
    </el-form-item>
    <el-form-item>
      <el-button
        type="primary"
        @click="$emit('search')"
      >
        查询
      </el-button>
      <el-button
        type="default"
        @click="$emit('reset')"
      >
        重置
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { Input, Select, TimePicker, Timeline } from 'element-ui'
export default {
    name: 'VForm',
    model: {
        prop: 'form',
        event: 'update:form'
    },
    props: {
        config: {
            type: Array,
            default: () => [
                {
                    label: '活动名称',
                    prop: 'name',
                    type: 'input',
                    placeholder: '请输入活动名称',
                }
            ],
        },
        form: {
            type: Object,
            default: () => {
                return {}
            }
        },
        btns: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            VForm: [],
            VFormModel: {},
            TYPES: {
                'input': Input,
                'select': Select,
                'time': TimePicker,
                'timeline': Timeline,
            },
        }
    },
    watch: {
        config: {
            handler(val) {
                this.VForm = val
            },
            immediate: true,
            deep: true,
        },
        form: {
            handler(val) {
                this.VFormModel = val
            },
            immediate: true,
            deep: true,
        },
        VFormModel: {
            handler(val) {
                this.$emit('update:form', val)
            },
            immediate: true,
            deep: true
        }
    },
    methods: {
        initModel(arr) {
            return arr.reduce((pre, item) => Object.assign(pre, { [item.prop]: '' }), {})
        },
    }
}
</script>

<style></style>